import { Button, Result } from 'antd';
import React from 'react';
import { history } from 'umi';
import "./index.less"

// FC = Functional Component 使用这个类型有个好处就是，提醒你必须返回一个ReactNode 
// 在函数式组件中，无法像在类组件中一样使用state和生命钩子函数，但React提供了HOOK
const NoFoundPage: React.FC<{}> = () => (
  <Result
    status={404}
    title="404"
    subTitle="Sorry, the page you visited does not exist."
    extra={
      <Button type="primary" onClick={() => history.push('/')}>
        Back Home
      </Button>
    }
  />
);

export default NoFoundPage;
